<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gauge Test</title>
<script src="../gauge.min.js"></script>
<style>body {
padding: 20px;
margin: 0;
background: #fff
}</style>
</head>
<body>
<a href="#" onclick="gaugePS.value=57">57</a>
<a href="#" onclick="gaugePS.value=83">83</a>
<a href="#" onclick="gaugePS.value=30">30</a>
<hr>
<canvas id="gauge-ps"></canvas>
<script>
var gaugePS = new RadialGauge({
renderTo: 'gauge-ps',
width: 400,
height: 400,
units: 'PS',
minValue: 0,
maxValue: 120,
majorTicks: [
'0',
'10',
'20',
'30',
'40',
'50',
'60',
'70',
'80',
'90',
'100',
'110',
'120'
],
minorTicks: 20,
ticksAngle: 270,
startAngle: 45,
strokeTicks: true,
highlights : [
{ from : 0, to : 20, color : '#ffff80' },
{ from : 20, to : 40, color : 'yellow' },
{ from : 40, to : 60, color : 'lightgreen' },
{ from : 60, to : 80, color : 'lime' },
{ from : 80, to : 100, color : 'tomato' },
{ from : 100, to : 120, color : 'red' }
],
valueInt: 1,
valueDec: 0,
colorPlate: "#fff",
colorMajorTicks: "#686868",
colorMinorTicks: "#686868",
colorTitle: "#000",
colorUnits: "#000",
colorNumbers: "#686868",
valueBox: true,
colorValueText: "#000",
colorValueBoxRect: "#fff",
colorValueBoxRectEnd: "#fff",
colorValueBoxBackground: "#fff",
colorValueBoxShadow: false,
colorValueTextShadow: false,
colorNeedleShadowUp: true,
colorNeedleShadowDown: false,
colorNeedle: "rgba(200, 50, 50, .75)",
colorNeedleEnd: "rgba(200, 50, 50, .75)",
colorNeedleCircleOuter: "rgba(200, 200, 200, 1)",
colorNeedleCircleOuterEnd: "rgba(200, 200, 200, 1)",
borderShadowWidth: 0,
borders: true,
borderInnerWidth: 0,
borderMiddleWidth: 0,
borderOuterWidth: 5,
colorBorderOuter: "#fafafa",
colorBorderOuterEnd: "#cdcdcd",
needleType: "arrow",
needleWidth: 2,
needleCircleSize: 7,
needleCircleOuter: true,
needleCircleInner: false,
animationDuration: 4000,
animationRule: "dequint",
fontNumbers: "Verdana",
fontTitle: "Verdana",
fontUnits: "Verdana",
fontValue: "Led",
fontValueStyle: 'italic',
fontNumbersSize: 20,
fontNumbersWeight: 'bold',
fontTitleSize: 24,
fontUnitsSize: 22,
fontValueSize: 50,
animatedValue: true
});
gaugePS.draw();
gaugePS.value = "80";
</script>
</body>
</html>